<template>
  <el-form
    ref="formEle"
    :model="basicInfo"
    :rules="infoRules"
    label-width="100px"
    label-position="left"
    class="elForm"
    ><el-col :span="24">
      <el-form-item class="itemStyle" prop="name" label="直播间标题">
        <el-input
          v-model="basicInfo.name"
          placeholder="填写本次直播标题"
          maxlength="17"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="24"
      ><el-form-item
        class="itemStyle"
        prop="subAnchorWechat"
        label="主播副微信号"
      >
        <el-input
          v-model="basicInfo.subAnchorWechat"
          placeholder="主播副微信号(选填)"
          maxlength="17"
          show-word-limit
        ></el-input> </el-form-item
    ></el-col>
    <el-col :span="24">
      <el-form-item class="itemStyle" prop="time" label="开播时间">
        <el-date-picker
          v-model="basicInfo.time"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="x"
          type="datetimerange"
          range-separator="至"
          :picker-options="pickerOptions"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="24">
      <el-form-item class="itemStyle" prop="anchorName" label="主播昵称">
        <el-input
          v-model="basicInfo.anchorName"
          placeholder="填写本次直播昵称"
          maxlength="15"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="24">
      <el-form-item class="itemStyle" prop="anchorWechat" label="直播微信">
        <el-select
          v-model="basicInfo.anchorWechat"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in memberList"
            :key="item.Username"
            :label="item.WxName"
            :value="item.Username"
          >
            <span style="float: left">{{ item.WxName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.Username
            }}</span>
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="24">
      <el-form-item class="itemStyle" label="官方收录">
        <el-radio v-model="basicInfo.isFeedsPublic" :label="1">开启</el-radio>
        <el-radio v-model="basicInfo.isFeedsPublic" :label="0">关闭</el-radio>
      </el-form-item>
    </el-col>
    <el-col :span="24">
      <div class="next-step-wrap">
        <el-button type="primary" @click="nextStep">下一步</el-button>
      </div>
    </el-col>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { GetWxRoleList } from '@/service/main/main'
import { infoRules } from '../config/infoRules'
export default defineComponent({
  emits: ['nextStepSend'],
  async setup(props, { emit }) {
    const formEle = ref()
    onMounted(() => formEle)
    const basicInfo = reactive({
      name: '',
      anchorName: '',
      anchorWechat: '',
      subAnchorWechat: '',
      createrWechat: '',
      time: [],
      // 直播间默认手机直播
      type: 0,
      isFeedsPublic: 1,
    })

    // 获取用户选择数据
    let memberList = []
    let getRoleListRes = await GetWxRoleList()
    memberList = getRoleListRes.Data
    console.log(memberList)
    const pickerOptions = {
      disabledDate: (date: any) => {
        // return date.getTime() < Date.now() - 24 * 60 * 60 * 1000
        console.log(date.getTime() < Date.now() - 8.64e7)

        return date.getTime() < Date.now() - 8.64e7 //设置选择今天以及今天之后的日
        //return date.getTime() > Date.now(); //设置选择今天以及今天以前的日期
        //return date.getTime() < Date.now();//设置选择今天之后的日期（不能选择当天时间）
        // return date.getTime() > Date.now() - 8.64e7 //设置选择今天之前的日期（不能选择当天）
        // 设置当天23：59：59可选
        // let currentTime = this.getNowMonthDay() + ` 23:59:59`
        // return date.getTime() > new Date(currentTime).getTime()
      },
    }
    const nextStep = () => {
      formEle.value.validate((valid: boolean) => {
        if (valid) {
          emit('nextStepSend', basicInfo)
        }
      })
    }
    return {
      infoRules,
      basicInfo,
      getRoleListRes,
      memberList,
      pickerOptions,
      formEle,
      nextStep,
    }
  },
})
</script>

<style scoped lang="less">
.elForm {
  width: 65%;
  margin: auto;
  .itemStyle {
    padding: 10px 20px;
  }
}
</style>
